<template>
    <div>
        <el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle">
            <el-option :value="valueTitle" :label="valueTitle">
                <el-tree 
                    accordion 
                    ref="selectTree" 
                    :data="options" 
                    :props="props" 
                    :node-key="props.value" 
                    show-checkbox 
                    check-strictly
                    @check-change="handleChangeCheck">
                </el-tree>
            </el-option>
        </el-select>
    </div>
</template>



<script>
    export default {
        name: "el-tree-select",
        props: {
            options: {
                type: Array,        // 必须是树形结构的对象数组
                default: () => {
                    return []
                }
            },
            props: {
                type: Object,
                default: () => {
                    return {
                        value: 'id',             // ID字段名
                        label: 'label',         // 显示名称
                        children: 'children'    // 子级字段名
                    }
                }
            },
            value: {
                type: Number,
                default: () => {
                    return null
                }
            },
            clearable: {
                type: Boolean,
                default: () => {
                    return true
                }
            }
        },
        data() {
            return {
                i: 0,
                valueId: this.value,    // 初始值
                valueTitle: '',
                defaultExpandedKey: []
            }
        },
        mounted() {
          
        },
        methods: {
            handleChangeCheck(data,checked,node) {
                this.i++
                if (this.i % 2 == 0) {
                    if (checked) {
                        this.valueTitle = data[this.props.label]
                        this.valueId = data[this.props.value]
                        this.$refs.selectTree.setCheckedNodes([]);
                        this.$refs.selectTree.setCheckedNodes([data])
                        this.$emit('handleGetSelectVal',data)
                        //交叉点击节点
                    } else {
                        this.$refs.selectTree.setCheckedNodes([data])
                        //点击已经选中的节点，置空
                    }
                } else {
                    if(checked){
                        this.valueTitle = data[this.props.label]
                        this.valueId = data[this.props.value]
                        this.$emit('handleGetSelectVal',data)
                    }
                }
            },
            // 清除选中
            clearHandle() {
                this.valueTitle = ''
                this.valueId = null
                this.defaultExpandedKey = []
                this.$refs.selectTree.setCurrentKey([])       // 设置默认选中
                this.$emit('getValue', null)
            }
        },
    };

</script>



<style scoped>
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        padding: 0;
    }

    .el-select-dropdown__item.selected {
        font-weight: normal;
    }

    ul li>>>.el-tree .el-tree-node__content {
        height: auto;
    }

    .el-tree-node__label {
        font-weight: normal;
    }

    .el-tree>>>.is-current .el-tree-node__label {
        color: #409EFF;
        font-weight: 700;
    }

    .el-tree>>>.is-current .el-tree-node__children .el-tree-node__label {
        color: #606266;
        font-weight: normal;
    }
</style>